<template>
	<div id="container">
		<div class="titleBox">
			<statistics>
				<template #img><img src="../../assets/images/数量.png" alt="" /></template>
				<template #header>历月总物流数</template>
				<template #subhead>History num</template>
			</statistics>
		</div>
		<div class="chart-container">
			<div ref="chart" class="chart" />
		</div>
	</div>
</template>
<script>
	import * as echarts from 'echarts';
	import statistics from '@/components/statistics.vue';
	import { fontSize } from '@/common/fontSize.js';
	export default {
		props: {
			chartData: {
				default: () => {
					return {};
				},
			},
		},
		components: {
			statistics,
		},
		data() {
			return {
				statusChart: null,
			};
		},
		computed: {},
		mounted() {
			this.initChart();
			window.addEventListener('resize', () => {
				// 判断是否存在，直接调用resize方法
				if (this.statusChart) this.statusChart.resize();
			});
		},
		methods: {
			initChart() {
				this.statusChart = echarts.init(this.$refs.chart);
				var colorArr = ['#0C628C', '#3887D5', '#2570BB'];
				var color = {
					type: 'linear',
					x: 0,
					x2: 1,
					y: 0,
					y2: 0,
					colorStops: [
						{
							offset: 0,
							color: colorArr[0],
						},
						{
							offset: 0.5,
							color: colorArr[0],
						},
						{
							offset: 0.5,
							color: colorArr[1],
						},
						{
							offset: 1,
							color: colorArr[1],
						},
					],
				};
				var barWidth = 20;
				const xAxisData = ['区域1', '区域2', '区域3', '区域4', '区域5'];
				var data1 = [999, 1527, 3294, 7211, 8963];
				var bottomData = [1, 1, 1, 1, 1];
				var topData = [9999, 9999, 9999, 9999, 9999];
				// 指定图表的配置项和数据
				const option = {
					backgroundColor: 'rgba(0,0,0,0)',
					tooltip: {
						trigger: 'axis',
						formatter: function (params) {
							var str = params[0].name + ':';
							params.filter(function (item) {
								if (item.componentSubType == 'bar') {
									str += '<br/>' + item.seriesName + '：' + item.value;
								}
							});
							return str;
						},
					},
					grid: {
						top: fontSize(0.2),
						bottom: 0,
						left: '10%',
						right: '2%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: xAxisData,
						// 更改坐标轴颜色
						axisLine: {
							lineStyle: {
								color: this.fontColorX,
							},
							onZero: false,
						},
						// x轴的字体样式
						axisLabel: {
							interval: 0,
							textStyle: {
								color: this.fontColorX, // 更改坐标轴文字颜色
								fontSize: 14, // 更改坐标轴文字大小
								fontFamily: 'MicrosoftYaHei',
							},
							// X轴lable的处理函数，如果x轴的lable有空格，比如:['AM点检 异常', 'PM巡检 异常', 'PM保养 异常'],这里会以空格为分割，显示两行
							formatter: function (params) {
								return params.split(' ').join('\n');
								//                console.log(' formatter',params);
							},
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							formatter: '{value}',
							textStyle: {
								color: this.fontColorY, // 更改坐标轴文字颜色
								fontSize: fontSize(0.12), // 更改坐标轴文字大小
								fontFamily: 'MicrosoftYaHei',
							},
						},
						// 更改坐标轴颜色
						axisLine: {
							lineStyle: {
								color: '#657CA8',
							},
						},
						// 网格线
						splitLine: {
							// 网格线
							lineStyle: {
								type: 'solid',
								with: 0.5,
								color: this.borderColor,
							},
						},
					},
					series: [
						// 数据低下的圆片
						{
							name: '',
							type: 'pictorialBar',
							symbolOffset: ['0%', '50%'],
							symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
							z: 12,
							symbol: 'diamond',
							itemStyle: {
								opacity: 1,
								color: '#1B1B1C',
								// color: 'transparent'
							},
							data: bottomData,
						},
						// 数据的柱状图
						{
							name: '',
							type: 'bar',
							barWidth: fontSize(0.2),
							itemStyle: {
								// lenged文本
								opacity: 1, // 这个是 透明度
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{ offset: 0, color: '#0398CEFB' },
									{ offset: 0.5, color: '#9299A25B' },
									{ offset: 1, color: '#1B1B1C' },
								]),
							},
							data: data1,
						},
						// 替代柱状图 默认不显示颜色，是最下方柱图value值 - 20
						{
							type: 'bar',
							symbol: 'diamond',
							barWidth: fontSize(0.22),
							itemStyle: {
								color: 'transparent',
							},
							data: data1,
						},
						// 数据顶部的样式
						{
							name: '',
							type: 'pictorialBar',
							symbol: 'diamond',
							symbolOffset: ['0%', '-50%'],
							symbolSize: [fontSize(0.2), fontSize(0.1)],
							z: 12,
							itemStyle: {
								normal: {
									opacity: 1,
									color: '#FFFFFF',
									label: {
										show: true, // 开启显示
										position: 'top', // 在上方显示
										textStyle: {
											// 数值样式
											color: '#FFFFFF',
											fontSize: fontSize(0.12),
											top: 10,
										},
									},
								},
							},
							symbolPosition: 'end',
							data: data1,
						},

						// 阴影的顶部
						{
							name: '', // 头部
							type: 'pictorialBar',
							symbol: 'diamond',
							symbolOffset: ['0%', '-50%'],
							symbolSize: [fontSize(0.2), fontSize(0.1)],
							z: 12,
							symbolPosition: 'end',
							itemStyle: {
								color: 'rgba(18, 47, 133,0.5)',
								opacity: 0.3,
								borderWidth: 1,
								borderColor: 'rgba(18, 47, 133,1)',
							},
							data: topData,
						},
						// 后面的背景
						{
							type: 'bar',
							barWidth: fontSize(0.2),
							barGap: '-100%',
							z: 0,
							itemStyle: {
								color: 'rgba(18, 47, 133,0.3)',
							},

							data: topData,
						},
					],
				};
				this.statusChart.setOption(option);
			},
		},
		beforeDestroy() {},
	};
</script>
<style scoped>
	#container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.chart-container {
			flex: 1;
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.chart {
				/* background-color: red; */
				width: 100%;
				height: 100%;
				margin: 0 auto;
			}
		}
	}
</style>
